/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Tooltip } from 'antd';
import styles from './index.less';

export default function RowsTooltip({ rows = [], labelWidth = 145, children, ...rest }) {
    const title = rows.map((row, index) => (
        <div key={index} className={styles.row} {...rest}>
            <span className={styles.label} style={{ width: labelWidth }}>
                {row.label}：
            </span>
            <span className={styles.value}>{row.value}</span>
        </div>
    ));

    return (
        <Tooltip
            placement="top"
            overlayStyle={{ maxWidth: 'initial' }}
            title={<div className={styles.wrapper}>{title}</div>}
        >
            {children}
        </Tooltip>
    );
}
